<template>
  <div class="contactPerson-container">
    <v-expansion-panels :value="0" class="mt-6" accordion>
      <v-expansion-panel class="contact-person">
        <v-expansion-panel-header class="contact-person-title">
          Contact Person
          <div class="title-container" @click.stop>
            <v-tooltip content-class="tooltip" bottom>
              <template v-slot:activator="{ on }">
                <v-btn
                  v-on="on"
                  @click="openDeleteContactPerson(selectedContactPerson)"
                  class="pa-0 title-btn"
                  height="16"
                  width="16"
                  color="#ECEDEE"
                  depressed
                >
                  <v-icon size="16" color="#79839B">mdi-delete</v-icon>
                </v-btn>
              </template>
              Delete Contact Person
            </v-tooltip>
            <v-tooltip content-class="tooltip" bottom>
              <template v-slot:activator="{ on }">
                <v-btn
                  v-on="on"
                  @click="openEditContactPerson(selectedContactPerson)"
                  class="pa-0 title-btn"
                  height="16"
                  width="16"
                  color="#ECEDEE"
                  depressed
                >
                  <v-icon size="16" color="#79839B">
                    mdi-square-edit-outline
                  </v-icon>
                </v-btn>
              </template>
              Edit Contact Person
            </v-tooltip>
            <v-tooltip content-class="tooltip" bottom>
              <template v-slot:activator="{ on }">
                <v-btn
                  v-on="on"
                  @click="openAddContactPerson()"
                  class="pa-0 title-btn"
                  height="16"
                  width="16"
                  color="#ECEDEE"
                  depressed
                >
                  <v-icon size="16" color="#79839B"> mdi-plus-thick </v-icon>
                </v-btn>
              </template>
              Add Contact Person
            </v-tooltip>
          </div>
        </v-expansion-panel-header>
        <v-expansion-panel-content class="pa-0">
          <v-card
            @click="selectContactPerson(contactPerson)"
            v-for="contactPerson in propContactPersons"
            :key="contactPerson.id"
            v-ripple="{}"
            class="contact-person-content"
            :class="{ active: isSelected(contactPerson) }"
            flat
          >
            <v-card-text class="pa-0 pl-2 pr-2">
              <h3>
                {{ contactPerson.contactPerson }} （{{
                  contactPerson.userName
                }}）
              </h3>
              <ul class="d-flex">
                <li class="mr-8">Tel：{{ contactPerson.tel }}</li>
                <li class="mr-8">Mobile：{{ contactPerson.mobileNumber }}</li>
                <li class="mr-8">Fax：{{ contactPerson.faxNumber }}</li>
              </ul>
              <p class="ma-0">{{ contactPerson.email }}</p>
            </v-card-text>
          </v-card>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
    <Dialog
      v-model="showDialog"
      :title="dialogTitle"
      :show-save="step !== 3"
      :width="dialogWidth"
      @submit="saveContactPerson"
    >
      <template>
        <AddEditContactPerson
          v-if="[1, 2].includes(step)"
          ref="addEditContactPerson"
        ></AddEditContactPerson>
        <Delete
          v-else
          @delete="deleteContactPerson(selectedContactPerson)"
          ref="deleteContactPerson"
          :title="deleteTitle"
          :subtitle="deleteSubtitle"
        ></Delete>
      </template>
    </Dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import AddEditContactPerson from "@/components/Customer/Dialog/ContactPerson/AddEditContactPerson.vue";
import Delete from "@/components/Customer/Dialog/Delete/Delete.vue";
import { IContactPerson } from "@/components/Customer/index";
@Component({
  components: {
    Dialog,
    AddEditContactPerson,
    Delete,
  },
  props: {
    contactPersons: {
      type: Array,
      default: () => [],
    },
  },
})
export default class ContactPerson extends Vue {
  selectedContactPerson: IContactPerson | null = null;
  selectContactPerson(contactPerson: IContactPerson) {
    if (this.isSelected(contactPerson)) {
      this.selectedContactPerson = null;
    } else {
      this.selectedContactPerson = contactPerson;
    }
  }
  isSelected(contactPerson: IContactPerson) {
    return (
      this.selectedContactPerson &&
      this.selectedContactPerson.id === contactPerson.id
    );
  }
  get propContactPersons() {
    return this.$props.contactPersons;
  }
  // 1.addContactPerson 2.editContactPerson 3.deleteContactPerson
  step = -1;
  // Dialog
  dialogTitle = "";
  showDialog = false;
  get dialogWidth() {
    return this.step === 3 ? 480 : 584;
  }
  openDialog() {
    this.showDialog = true;
  }
  closeDialog() {
    this.showDialog = false;
  }
  // contract

  // action

  openAddContactPerson() {
    this.step = 1;
    this.dialogTitle = "Add Contact Person";
    this.$nextTick(() => {
      (this.$refs.addEditContactPerson as AddEditContactPerson).resetForm();
    });
    this.openDialog();
  }

  openEditContactPerson(contactPerson: IContactPerson | null) {
    if (!contactPerson) {
      this.SweetAlertService.warning(
        "Please select the contactPerson you want to edit"
      );
      return;
    }
    this.step = 2;
    this.dialogTitle = "Edit Contact Person";
    this.$nextTick(() => {
      const addEditContactPersonRef = this.$refs
        .addEditContactPerson as AddEditContactPerson;
      addEditContactPersonRef.resetForm();
      setTimeout(() => {
        addEditContactPersonRef.setFormData(contactPerson);
      });
    });
    this.openDialog();
  }

  deleteTitle = "Are you sure to delete this Contact Person?";
  get deleteSubtitle() {
    if (this.selectedContactPerson) {
      return `${this.selectedContactPerson.contactPerson} - ${this.selectedContactPerson.userName}`;
    } else {
      return "";
    }
  }
  openDeleteContactPerson(contactPerson: IContactPerson | null) {
    if (!contactPerson) {
      this.SweetAlertService.warning(
        "Please select the Contact Person you want to delete"
      );
      return;
    }
    this.step = 3;
    this.dialogTitle = "Delete";
    this.openDialog();
  }
  async saveContactPerson() {
    const addEditContactPersonRef = this.$refs
      .addEditContactPerson as AddEditContactPerson;
    const result = await addEditContactPersonRef.validateFormData();
    if (result) {
      if (this.step === 1) {
        result.id = String(new Date().getTime());
        this.addContactPerson(result as IContactPerson);
      } else {
        this.editContactPerson(result as IContactPerson);
      }
      this.closeDialog();
    }
  }
  addContactPerson(contactPerson: IContactPerson) {
    this.propContactPersons.push(contactPerson);
  }
  editContactPerson(contactPerson: IContactPerson) {
    if (!this.selectedContactPerson) {
      return;
    }
    Object.assign(this.selectedContactPerson, contactPerson);
  }

  deleteContactPerson(contactPerson: IContactPerson | null) {
    if (!contactPerson) {
      return;
    }
    let index = this.propContactPersons.indexOf(contactPerson);
    this.propContactPersons.splice(index, 1);
    this.selectedContactPerson = null;
    this.closeDialog();
  }
}
</script>

<style lang="scss" scoped>
@import "@/components/Customer/ContactInfo/ContactPerson.scss";
</style>
